<template>
  <div>
    <h1>员工管理</h1>
    <!-- 员工信息列表 -->
    <table>
      <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>联系方式</th>
        <th>职位</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(employee, index) in employees" :key="index">
        <td>{{ employee.name }}</td>
        <td>{{ employee.gender }}</td>
        <td>{{ employee.contact }}</td>
        <td>{{ employee.position }}</td>
        <td>
          <button @click="editEmployee(index)">编辑</button>
          <button @click="deleteEmployee(index)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <!-- 新增员工表单 -->
    <form @submit.prevent="addEmployee">
      <input v-model="newEmployee.name" placeholder="姓名" required>
      <input v-model="newEmployee.gender" placeholder="性别" required>
      <input v-model="newEmployee.contact" placeholder="联系方式" required>
      <input v-model="newEmployee.position" placeholder="职位" required>
      <button type="submit">新增员工</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  data() {
    return {
      employees: [
        { name: '甲', gender: '女', contact: '138xxxxxxxx', position: '大老板' },
        { name: '乙', gender: '男', contact: '139xxxxxxxx', position: '预订部主管' },
        { name: '丙', gender: '男', contact: '133xxxxxxxx', position: '客房主管' },
        { name: '丁', gender: '男', contact: '137xxxxxxxx', position: '前台主管' }
      ],
      newEmployee: {
        name: '',
        gender: '',
        contact: '',
        position: ''
      }
    };
  },
  methods: {
    addEmployee() {
      this.employees.push({...this.newEmployee});
      this.newEmployee = {
        name: '',
        gender: '',
        contact: '',
        position: ''
      };
    },
    editEmployee(index) {
      // 这里可以实现编辑功能，例如弹出编辑框
      console.log('编辑员工信息，索引：', index);
    },
    deleteEmployee(index) {
      this.employees.splice(index, 1);
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

form {
  margin-top: 20px;
}

input {
  margin-right: 10px;
  padding: 5px;
}

button {
  padding: 5px 10px;
}
</style>